<style lang="less">
  .text-edit {
    z-index: 2;
    background: #000;
    .text-view {
      position: relative;
      color: #fff;
      .color-picker {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20rpx;
        .color-item {
          margin: 12rpx;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          box-sizing: border-box;
        }
        .color-item--active {
          position: relative;
          &::after {
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 25rpx;
            height: 25rpx;
            border: 6rpx solid #000;
            border-radius: 50%;
          }
        }
        .color-item--black {
          border: 1rpx solid rgba(255, 255, 255, 0.65);
        }
        .color-item--black.color-item--active {
          background: #fff!important;
          &::after {
            background: #000;
          }
        }
      }
    }
    .handle-bar {
      padding: 0 24rpx;
      height: 102rpx;
      background: #fff;
      .text-input {
        font-size: 28rpx;
        border: 2rpx solid #eee;
        padding: 8rpx 12rpx;
        border-radius: 6rpx;
      }
      .submit-btn {
        margin-left: 24rpx;
        width: 60rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        border-radius: 6rpx;
        background: var(--theme);
        color: #fff;
        font-size: 40rpx;
      }
    }
  }
</style>

<template>
  <view class="text-edit fixed-view flex flex-col">
    <view class="text-view flex-1 flex just-center align-center">
      <view class="text-content" :style="{ color: color, background: color === '#000' ? '#fff' : 'transparent' }">{{ text }}</view>
      <view class="color-picker flex align-center">
        <view v-for="item in colorOptions" :key="item" class="color-item" :class="{ 'color-item--active': item === color, 'color-item--black': item === '#000' }" :style="{ background: item }" @click="changeColor(item)"></view>
      </view>
    </view>
    <view class="handle-bar flex align-center" :class="isIphoneX ? 'iphoneX-bottom' : ''">
      <input v-model="text" class="flex-1 text-input" focus cursor-spacing="20" />
      <text class="submit-btn iconfont icon-true" @click="submit"></text>
    </view>
  </view>
</template>

<script>
import systemMixin from '@/mixin/system'
/**
 * 水印文字编辑
 */
export default {
  name: 'TextEdit',
	mixins: [systemMixin],
  props: {
    value: {
      type: String,
      default: ''
    },
    textColor: {
      type: String,
      default: '#fff'
    },
  },
  data() {
    return {
      text: '',
      color: '#fff',
      colorOptions: ['#fff', '#000', '#FF597A', '#07c160', '#1989fa', '#ee0a24', '#ff976a']
    }
  },
  methods: {
    submit() {
      this.$emit('input', this.text)
      this.$emit('changeColor', this.color)
      this.$emit('submit')
    },
    changeColor(color) {
      this.color = color
    }
  },
  mounted() {
    this.text = this.value
    this.color = this.textColor
  }
}
</script>